<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addText(){
				let element=document.createElement("div");//创建标签为div
				element.innerHTML="文本内容";
				document.querySelector(".con").appendChild(element);
			}
			function addImg(){
				let element=document.createElement("img");
				element.setAttribute("src","../src/ok.png");
				document.querySelector(".con").appendChild(element);
			}
			function deleteFirstText(){
				/*
				let element=document.getElementsByClassName("con");
				let parentDiv= element.index(0);
				parentDiv.removeChild()
				*/
				let text=document.querySelector(".con>div:nth-of-type(1)");//querySelector()只会选择第一个
				text.parentNode.removeChild(text);
				
			}
			
			function deleteFirstImg(){
				let img=document.querySelector(".con>img");//querySelector()只会选择第一个
				img.parentNode.removeChild(img);
				
			}
			function deleteFirstChild(){
				let element=document.querySelector(".con");
				//let firstChild=document.querySelector(".con>*");
				element.removeChild(element.firstChild);//通过父节点得到可以得到第一个,最后一个节点
				
			}
			function deleteLastChild(){
				let element=document.querySelector(".con");
				element.removeChild(element.lastChild);
				
			}
		</script>
	</head>
	<body>
		
		<button type="button" onclick="addText()">添加文本</button>
		<button type="button" onclick="addImg()">添加图片</button>
		<button onclick="deleteFirstText()">删除第一个文本</button>
		<button onclick="deleteFirstImg()">删除第一个图像</button>
		<button onclick="deleteFirstChild()">删除第一个孩子</button>
		<button onclick="deleteLastChild()">删除最后一个孩子</button>
		<div class="con">
			
		</div>
	</body>
</html>
